﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZDLQX.aspx.cs" Inherits="IYAKASAPortal.PrintAll.ZDLQX" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #TextArea1 {
            width: 1388px;
            height: 218px;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../script/code/highcharts.js"></script>
    <script type="text/javascript" src="../script/code/modules/exporting.js"></script>
     <script type="text/javascript" src="../script/code/modules/series-label.js"></script>
     <script type="text/javascript" src="../script/code/modules/oldie.js"></script>
     <script type="text/javascript" src="../script/code/modules/oldie.js"></script>
        <script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../script/layer/layer.js"></script>
      
    <style type="text/css">
.y_table
{
    align:center;
  table-layout:fixed;
    border-collapse:collapse;
  border:1px solid;
  width:100%
}

.y_table thead tr
{
 height:40px;
}

.y_table tbody tr
{
 height:30px;
}

.y_table tr
{
  text-align:center;
}

.y_table tr td
{
  border:1px solid;


}
        div {
            margin:0 auto;
        }

.y_table tr:nth-child(even)
{
  background:RGB(209,231,246);
}

        .y_chart_container {
            max-width:600px;
            height:400px;
        }
</style>
</head>
<body overflow-y: auto; style="text-align:center">
   <div id="chart_container" style="text-align:center;width:1100px" overflow-y: auto></div>
    <textarea style="display:none" runat="server" id="TextArea1"></textarea>

    <table class="y_table" id="mTable">
        <thead id="mHead">

        </thead>
        <tbody id="mBody">

        </tbody>
     </table>
      <form id="form1" runat="server">
    </form>
</body>
</html>
<script>
    $(document).ready(function () {
        var jsonStr = $("#TextArea1").val();
        console.log("111");
        
        var obj = eval("(" + jsonStr + ")");
        if (obj === undefined || obj.length == 0) {
            layer.msg('当前报告单没有图表数据');
        }
        else {
            LoadDiv(obj);
        }
    });

    function LoadTable(obj,par)
    {
        if (obj.CheckType == 'P') {
            LoadTableForP(obj, par);
        }
        else {
            LoadTableForAJ(obj, par);
        }
        
    }

    function LoadTableForAJ(obj, par) {
        var dTable = document.createElement("table");
        dTable.className = "y_table";
        var dHead = document.createElement("thead");
        var headTr = document.createElement("tr");
        var infos = document.createElement("tbody");

        var idTd = document.createElement("td");
        idTd.innerHTML = "序号";
        headTr.appendChild(idTd);

        var xhTd = document.createElement("td");
        xhTd.innerHTML = obj.XName;
        headTr.appendChild(xhTd);
        for (var i = 0; i < obj.LineList.length; i++) {
            var td = document.createElement("td");
            td.innerHTML = obj.LineList[i].LineName;
            headTr.appendChild(td);
        }
        var h_z_td = document.createElement("td");
        h_z_td.innerHTML = "制动力差";
        headTr.appendChild(h_z_td);

        dHead.appendChild(headTr);
        dTable.appendChild(dHead);
        //标记最大值出现的行
        var maxRowId = 0;
        for (var t = 0; t < obj.LineList[0].PointList.length; t++) {
            var tr = document.createElement("tr");

            var xtd_id = document.createElement("td");
            xtd_id.innerHTML = t + 1;
            tr.appendChild(xtd_id);

            var xtd = document.createElement("td");
            xtd.innerHTML = obj.LineList[0].PointList[t].XPoint;
            tr.appendChild(xtd);
            var absVal = 0;        
            for (var j = 0; j < obj.LineList.length; j++) {
                var td = document.createElement("td");
                if (obj.LineList[j].PointList[t].YPoint == obj.LineList[j].MaxY ) {
                    maxRowId = t;
                    td.innerHTML = "<a style='color:red'>" + obj.LineList[j].PointList[t].YPoint + "</a>";
                }
                else {
                    td.innerHTML = obj.LineList[j].PointList[t].YPoint;
                }
                absVal -= obj.LineList[j].PointList[t].YPoint;
                absVal = Math.abs(absVal);
                tr.appendChild(td);
            }
            var td_abs = document.createElement("td");
            td_abs.innerHTML = absVal;
            tr.appendChild(td_abs);
            infos.appendChild(tr);
        }
        dTable.appendChild(infos);
        dTable = Remark_AJ_TableRow(dTable, maxRowId);
        par.appendChild(dTable);
    }

    function Remark_AJ_TableRow(obj, maxRow) {
        var maxVal = 0;
        var markRowId = 1;
        for (var i = 1; i <= maxRow + 1; i++) {
            if (parseInt(maxVal) < parseInt(obj.rows[i].cells[4].innerHTML)) {
             
                maxVal = obj.rows[i].cells[4].innerHTML;
                markRowId = i;
           }
        }
        obj.rows[markRowId].style.backgroundColor = "#FF79BC";
        return obj;
    }

    function LoadTableForP(obj,par)
    {
        var dTable = document.createElement("table");
        dTable.className = "y_table";
        var dHead = document.createElement("thead");
        var headTr = document.createElement("tr");
        var infos = document.createElement("tbody");
        var xhTd = document.createElement("td");
        xhTd.innerHTML = obj.XName;
        headTr.appendChild(xhTd);
        for (var i = 0; i < obj.LineList.length; i++)
        {
            var td = document.createElement("td");
            td.innerHTML = obj.LineList[i].LineName;
            headTr.appendChild(td);
        }
        dHead.appendChild(headTr);
        dTable.appendChild(dHead);

        for (var t = 0; t < obj.LineList[0].PointList.length; t++) {
            var tr = document.createElement("tr");
            var xtd = document.createElement("td");
            xtd.innerHTML =obj.LineList[0].PointList[t].XPoint;
            tr.appendChild(xtd);
            for (var j = 0; j < obj.LineList.length; j++) {          
                var td = document.createElement("td");
                td.innerHTML = obj.LineList[j].PointList[t].YPoint;         
                tr.appendChild(td);                
            }
            infos.appendChild(tr);
        }
        dTable.appendChild(infos);
        par.appendChild(dTable);
    }


    function LoadDiv(obj)
    {
    
        var parDiv = document.getElementById("chart_container");
        for (var t = 0; t < obj.length; t++)
        {
            var data = ReSetData(obj[t]);
            var mContainer = document.createElement("div");
            mContainer.className = "y_chart_container";
            var divId = "Container_" + t;
            mContainer.setAttribute("id", divId);
            parDiv.appendChild(mContainer);

            LoadChartById(obj[t], divId, data);
            LoadTable(obj[t],parDiv);
        }
    }

    function ReSetData(data)
    {
       
        var arr = [];

        for (var i = 0; i < data.LineList.length; i++)
        {
            var obj = new Object();
            obj.name = data.LineList[i].LineName;
            var arr1 = [];
            for (var j in data.LineList[i].PointList)
            {
                var arr2 = [];
                for (var k in data.LineList[i].PointList[j])
                {
                    arr2.push(data.LineList[i].PointList[j][k]);
                }
                arr1.push(arr2);
            }
            obj.data = arr1;
            arr.push(obj);
        }
        return arr;

    }

    function LoadChartById(obj,id,arr)
    {
        var chart = Highcharts.chart(id, {
            title: {
                text: obj.ChartName
            },
            subtitle: {
                text: ''
            },
            yAxis: {
                max: obj.MaxXValue * 100,
                min: (obj.MaxXValue - 1) * 100,
                tickPositions: [0, Math.round(obj.MaxYValue / 5), Math.round( obj.MaxYValue * 2 / 5), Math.round( obj.MaxYValue * 3 / 5), Math.round( obj.MaxYValue * 4 / 5), Math.round( obj.MaxYValue)],
                title: {
                    text: obj.YName
                }
            },
            xAxis: {
                tickPositions: [0, (obj.MaxXValue / 5).toFixed(obj.XDec), (obj.MaxXValue * 2 / 5).toFixed(obj.XDec), (obj.MaxXValue * 3 / 5).toFixed(obj.XDec), (obj.MaxXValue * 4 / 5).toFixed(obj.XDec), (obj.MaxXValue).toFixed(obj.XDec)],
                title: {
                    text: obj.XName
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 0

                },
                area: {
                    event: {
                        legendItemClick : false
                    }
                }
            },
            series: arr, 
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 310
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            },
            credits:
                {
                    enabled:false
                },
            exporting:
        {
            enabled:false
        }
        });
    }
</script>
